import { Component } from 'react'
import { View, Text, ScrollView, Image, Picker } from '@tarojs/components'
import { AtButton, AtInput, AtIcon, AtList, AtListItem, AtImagePicker, AtTextarea } from 'taro-ui'
import { observer, inject } from 'mobx-react'
import Taro from '@tarojs/taro'
import fileUpload from '../../utils/qiniu/upload'
import IconFont from '../../components/iconfont';
import cls from 'classnames'
import './index.less'

const TYPE_LIST = [
	{
		name: '毕业证',
		value: 1,
	},
	{
		name: '学位证',
		value: 2,
	},
]

@inject('store')
@observer
export default class Index extends Component {

  state = {
    type: null,
    schoolName: null,
    image: null,
    loading: false
  }

  onTypeChange = (e) => {
    const { value } = e.detail;

    this.setState({
      type: (+value) + 1
    })
  }

  onImageChange = async (e) => {
    const url = e?.[0]?.url
    if (!url) {
      this.setState({
        image: ''
      })
      return
    }
    const resp = await fileUpload.uploadImg(url)
    this.setState({
      image: resp?.path
    })
  }

  onSchoolNameChange = (schoolName) => {
    this.setState({
      schoolName
    })
  }

  handleSubmit = async () => {
    const { schoolName, type, image, loading } = this.state
    if (!schoolName) {
      Taro.showToast({
				title: '名称不能为空',
				icon: 'none',
				duration: 2000
			})
      return
    }

    if (!type) {
      Taro.showToast({
				title: '请选择认证方式',
				icon: 'none',
				duration: 2000
			})
      return
    }

    if (!image) {
      Taro.showToast({
				title: '请上传认证图片',
				icon: 'none',
				duration: 2000
			})
      return
    }

    const params = {
      accountId: this.props.store.userInfo.id,
      schoolName,
      type,
      image
    }

    if (loading) {
      return
    }

    this.setState({
      loading: true
    })

    const { success, data } = await Taro.request({
      method: 'post',
      url: '/api/account/education/certification',
      data: params
    })
    if (success) {
      Taro.showToast({
				title: '提交成功',
				icon: 'none',
				duration: 2000
			})
    }
    this.setState({
      loading: false
    })
  }

  render () {
    const { schoolName, type, image } = this.state
    let typeText = ''
    if (Number.isInteger(type)) {
      typeText = TYPE_LIST.find(item => item.value == type)?.name;
    }

    const imageFiles = image ? [{ url: image }] : []

    return (
      <View
        className='realName-certification-page'
      >
        <View className='page-tip-desc'>
          汇聚各行优秀单身青年，承诺保证信息安全
        </View>
        <View className='form-list'>
          {/* <View className='form-list-item'>
            <AtInput
              required
              border={false}  
              name='companyName'
              title={type == 6 ? '学校名称' : '公司名称'} 
              type='text' placeholder='请输入' 
              value={companyName} 
              onChange={this.onCompanyNameChange} />
          </View> */}

          <View className='form-list-item'>
            <View className='field column'>
              <View className='field-title require'>
                学校名称 
              </View>
              <View className='field-content'>
                <AtTextarea
                  value={schoolName || ''} 
                  onChange={this.onSchoolNameChange}
                  placeholder='请输入'
                  count={false}
                />
              </View>
            </View>
          </View>

          <View className='form-list-item'>
            <Picker mode='selector'
              range={TYPE_LIST}
              rangeKey="name"
              onChange={this.onTypeChange}
            >
              <View className='field'>
                <View className='field-title require'>
                  认证方式
                </View>
                <View className='field-content'>
                  {typeText || '请选择'}
                </View>
                <AtIcon value='chevron-right' size='22' color='#ccc'></AtIcon>
              </View>
            </Picker>
          </View>

          <AtImagePicker
						files={imageFiles}
						onChange={this.onImageChange}
						multiple={false}
						showAddBtn={imageFiles.length == 0}
					/>

          <View className='form-list-submit' onClick={this.handleSubmit}>
            立即认证
          </View>
        </View>
      </View>
    )
  }
}